require(['./config'], () => {
    require(['template','header', 'elevateZoom', 'footer', 'fly'], (template,header) => {
        class Cart {
            constructor() {
                this.getDate().then(() => {
                    this.render()
                    this.Zoom()
                    this.size()
                    this.btnChange()
                    this.addCart()

                })
            }
            // 详情页渲染
            getDate() {
                const id = window.location.search.slice(1).split('&').reduce((obj, item) => {
                    var arr = item.split('=');
                    obj[arr[0]] = arr[1];
                    return obj;
                }, {}).id
                this.id = Number(id);
                return new Promise(resove => {
                    $.get('http://rap2.taobao.org:38080/app/mock/258648/api/detail', { id: this.id }, resp => {
                        if (resp.code === 200) {
                            const { detail } = resp.body;
                            this.detail = { ...detail, id: this.id };
                            resove()
                        }
                    })
                })
            }
            render() {
                $('#list').html(template('detailTmplate', {
                    ...this.detail
                }))
            }
            // 放大镜和图片切换
            Zoom() {
                $('.girl').elevateZoom({
                    gallery: 'gal1'
                })
            }
            // 尺码切换
            size() {
                $('.spans').on('click', function () {
                    $('.sml').html($(this).text())
                })
            }
            // 购物车
            btnChange() {
                $('.num-ops').on('click', function () {
                    let num = $('#selectNum').val()
                    num--
                    if (num > 0) {
                        $('#selectNum').val(num)
                    } else {
                        $('#selectNum').val(0)
                    }
                })
                $('.num-opss').on('click', function () {
                    let num = $('#selectNum').val()
                    num++
                    $('#selectNum').val(num)
                })
            }

            addCart() {
                $('.btn-addCart').on('click', e => {
                    this.fly(e)
                    let cart = localStorage.getItem('cart')
                    if (cart) {
                        cart = JSON.parse(cart)
                        const isExist = cart.some(shop => {
                            return shop.id === this.detail.id
                        })
                        if (isExist) {
                            cart = cart.map(shop => {
                                if (shop.id === this.detail.id) {
                                    shop.count = parseInt(shop.count) + parseInt($('.num-input').val())
                                }
                                return shop
                            })
                        } else {
                            cart.push({
                                ...this.detail,
                                count: $('.num-input').val(),
                                checked:true
                            })
                        }
                        localStorage.setItem('cart', JSON.stringify(cart))
                    } else {
                        localStorage.setItem('cart', JSON.stringify([{ ...this.detail, count: $('.num-input').val() , checked:true}]))
                    }
                })
            }
            fly(e) {
                $(`<img src="${this.detail.imgs[0]}" style="width: 50px;height: 50px;border-radius:50%">`).fly({
                    start: {
                        left: e.clientX,
                        top: e.clientY,
                    },
                    end: {
                        left: $('.zongji').offset().left - $(window).scrollLeft(),
                        top: $('.zongji').offset().top - $(window).scrollTop()
                    },
                    speed: 1.1,
                    vertex_Rtop: 100,
                    onEnd: function () {
                        this.destroy()
                        header.calcCartTotal()
                    }
                })
            }
        }
        new Cart()
    })
})